<template>
	<view class="Tabbar">
		<view class="barBox">
			<view
				class="tabs"
				@click.stop="TabarUrl(item)"
				v-for="(item, index) in tabData"
				:key="index">
				<image
					:src="staticImg(index == tab ? item.selectedIconPath : item.iconPath)"
					mode="aspectFit"
					class="tabImg">
				</image>
				<text class="tabs_name">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { imgUrls, staticImg } from '@/utils/utils.js';
	const props = defineProps({
		tab: {
			type: Number,
			default: 0,
		},
	});
	const tabData = reactive([
		{
			iconPath: 'sy1.png',
			selectedIconPath: 'sy2.png',
			pagePath: '/lawyer/home',
			title: '首页',
		},
		{
			iconPath: 'DD1.png',
			selectedIconPath: 'DD2.png',
			pagePath: '/lawyer/order',
			title: '我的订单',
		},
		// {
		// 	iconPath: 'AJLB1.png',
		// 	selectedIconPath: 'AJLB2.png',
		// 	pagePath: '/lawyer/case',
		// 	title: '案件列表',
		// },
		{
			iconPath: 'WD1.png',
			selectedIconPath: 'WD2.png',
			pagePath: '/lawyer/my',
			title: '我的',
		},
	]);

	const TabarUrl = (Item) => {
		uni.redirectTo({
			url: Item.pagePath,
		});
	};
</script>

<style lang="scss" scoped>
	.Tabbar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 666;
		background-color: #ffffff;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.barBox {
			width: 100%;
			height: 100rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.tabs {
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				.tabImg {
					width: 42rpx;
					height: 40rpx;
				}

				.tabs_name {
					color: #666;
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>
